<template>
<div id="upload">
      <div class="warp">
        <div class="warp_left" @click="fileClick">
          <img src="./upload.png">
        </div>
        <div class="warp_img" v-show="imgList.length!=0">
          <div class="warp_img_div" >
            <mu-avatar @click="fileClick" :size="imgsize" :src="img.src"/>
          </div>
        </div>
      </div>
      <input @change="fileChange($event)" type="file" id="file"  style="display: none"/>
      
</div>
</template>
<script>
import http from "../../http/http.js" 
  export default {
    props:['imgsize','resultPicture'],
    data () {
      return {
        haseimg:false,
        imgList: [],
        img:{},
        size: 0,
        uploadUrl:this.config.uploadUrl,
      }
    },
      methods: {
          fileClick() {
              document.getElementById('file').click()
          },
          fileChange(el) {
            // console.log(el.target.files)

            let reader = new FileReader();
            reader.vue = this;
            var file = el.target.files[0]
            this.img = file
            this.haseimg = true
            reader.readAsDataURL(file);
            reader.onload = function () {
                file.src = this.result;
                this.vue.imgList.push({
                    file
                });
            }
            this.upload(file)
          },
          upload:function(file){
            var that = this
            let param = new FormData(); //创建form对象
            console.log(file)
            param.append('image',file,file.name);//通过append向form对象添加数据
            param.append('imageType',1);//添加form表单中其他数据FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = {
              headers:{'Content-Type':'multipart/form-data'}
            };  //添加请求头

            http.post(that.uploadUrl,param,config)
            .then(function(response){
              console.log(response)
              that.$emit("update:resultPicture", response.data.imageName)
            })
            .catch(function(err){console.log(err)});
          }
          
      },
      mounted(){
        var element = document.getElementById('upload')
        element.style.width = this.imgsize + 'px';
        element.style.height = this.imgsize + 'px';
        var element = document.getElementsByClassName('warp_img_div')[0]
        element.style.width = this.imgsize + 'px';
        element.style.height = this.imgsize + 'px';
      }
  }
</script>
<style>
   
  #upload .warp_img_div {
      position: relative;
      margin: 0px 30px 10px 0px;
      float: left;
      line-height: 100px;
      display: table-cell;
      text-align: center;
      cursor: pointer;
    }

  #upload .warp_img {
      position: absolute;
      top:1px;
      left: 1px;
      width: 100%;
      overflow: hidden
    }
  #upload .warp_left img {
      margin-top: 20%;
      width: 60%;
      height:60%;
    }

  #upload .warp_left {
      text-align: center;
      width: 100%;
      height: 100%;
      background: #F0F0F0;
      border-radius: 100%;
      cursor: pointer;
    }

  #upload .warp {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #upload{
      height: 100px;
      width: 100px;
    }
 </style>